<template>
  <div>
    <van-search v-model="value" placeholder="搜索歌曲, 歌手, 专辑" fixed />
    <div class="hot_search" v-if="!isshow">
      <p class="hot_title">热门搜索</p>
      <ul class="hot_name_wrap">
        <li
          class="hot_item"
          v-for="(val,index) in list"
          :key="index"
          @click="btn(val.first)"
        >{{val.first}}</li>
      </ul>
    </div>
    <div class="hot_search" v-else>
      <p class="hot_title">最佳搜索</p>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
        <van-cell v-for="item in list2" :key="item.al.id">
          <!-- <template>
            <div class="song_item_wrap">
              <div class="song_left">
                <p>{{item.name}}</p>
                <p>
                  <span v-for="val in item.ar" :key="val.id">{{val.name}} &nbsp;</span>
                  <span>{{item.al.name}}</span>
                </p>
              </div>
              <div class="song_right">
                <i class="iconfont icon-bofang"></i>
              </div>
            </div>
          </template>-->
          <fuyong :name="item.name" :a_name="item.al.name">
            <span v-for="val in item.ar" :key="val.id">{{val.name}} &nbsp;</span>
          </fuyong>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import fuyong from "../components/fuyong";
function debounce(fn, theTime) {
  return function () {
    clearTimeout(fn.timer);
    fn.timer = setTimeout(() => {
      fn.call(this, ...arguments);
    }, theTime);
  };
}
import { ssgjzapi, searchlistapi } from "../api/index";
export default {
  components: {
    fuyong,
  },
  data() {
    return {
      value: "", // 搜索关键字
      list: [],
      list2: [],
      loading: false,
      finished: false,
      isshow: false,
    };
  },
  methods: {
    btn(val) {
      this.value = val;
    },
    async sosuo() {
      const res2 = await searchlistapi({
        keywords: this.value,
      });
      console.log(res2);
      if (!res2.data.result) {
        this.list2 = [];
        this.isshow = false;
      } else {
        this.list2 = res2.data.result.songs;
        this.finished = true;
        this.isshow = true;
      }
    },
  },
  watch: {
    value() {
      this.getfn();
    },
  },
  async created() {
    const res = await ssgjzapi();
    console.log(res);
    this.list = res.data.result.hots;
    this.getfn = debounce(this.sosuo, 1000);
  },
};
</script>

<style scoped>
/* 热门搜索 */
.hot_search {
  padding: 0.266667rem;
}
.hot_title {
  font-size: 0.32rem;
  color: #666;
}
.hot_name_wrap {
  margin: 0.266667rem 0;
}
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

.van-cell {
  padding: 0.133333rem 0.266667rem;
  border-bottom: 1px solid #ccc;
}
</style>